<template>
  <div style="height:100%">
    <div class="titleBackgroundColor" :style="{ height:size120,lineHeight:size120 }">
      <div class="n-title-text" :style="{fontSize:fontSize30}">工作室名片</div>
    </div>
    <div class="circleDiv" :style="{paddingLeft:circleDivPaddingLeft30,marginButtom:circleDivMarginButtom30,height:circleDivHeight60,lineHeight:circleDivHeight60 }">
      <div class="circle" :style="{fontSize:circleFontSize14,width:circleWidth20,height:circleHeight20,lineHeight:circleLineHeight15,marginTop:marginTop19px}">!</div>
      <div  style="color:orange" :style="{paddingLeft:circlePaddingLeft30,fontSize:fontSize20}">尚未完成用户资格认证,点击立即认证</div>
    </div>
    
    <div class="imageBackgroundColor">
      <div :style="{paddingTop:titlePaddingTop20,height:menuHeight100 }" style="height:100%;">
      <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }">
         <img :src="addPatient" :style="{width:imageWidth50,height:imageHeight50}" ></img>  
         <div :style="{fontSize:imagefontSize12}" v-on:click="openWorkCard">添加患者</div>
      </div>
      <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }" v-on:click="openSufferer">
         <img :src="allPatient" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">全部患者</div>
      </div>
      <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }" v-on:click="openSetUp">
         <img :src="setup" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">公告及设置</div>
      </div>      
      <div class="menu" :style="{height:menuHeight100,width:menuWidth150}" v-on:click="openInquiry">
         <img :src="question" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">问诊单</div>
      </div>     
    </div>
    <div :style="{paddingTop:titlePaddingTop20,height:menuHeight100 }" v-on:click="openPrescribingDrugs">
      <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }">
         <img :src="buy" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">开方购药</div>
      </div>      
      <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }">
         <img :src="appreciate" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">赞赏</div>
      </div>
         <div class="menu" :style="{width:menuWidth150,paddingLeft:paddingLeft20 }">
         <img :src="recommend" :style="{width:imageWidth50,height:imageHeight50}"></img>  
         <div :style="{fontSize:imagefontSize12}">推介同行</div>
      </div>
    </div>
    </div>

    <div class="waiting" :style="{height:menuLineHeight130,lineHeight:menuLineHeight130,marginTop:titlePaddingTop30,paddingLeft:titlePaddingTop20,paddingRight:titlePaddingTop20}">
      <div style="float:left" :style="{fontSize:fontSize25}"><span style="font-weight:bold" :style="{fontSize:fontSize30}">0</span>人已填写问诊单,待开方</div>
      <div style="float:right">></div>
    </div>

    <div class="waiting last-solid" style="height:100%" :style="{marginTop:titlePaddingTop30,paddingLeft:titlePaddingTop20,paddingRight:titlePaddingTop20}">
      <div :style="{height:menuLineHeight130}">
        <div style="float:left" :style="{paddingTop:imagefontSize12}">
          <img :src="head" :style="{width:headImageSize65,height:headImageSize65}" class="head-Image"></img> 
        </div>
        <div style="float:left" :style="{marginLeft:titlePaddingTop30,marginTop:titlePaddingTop20}">
          <div style="font-weight:bold" :style="{fontSize:fontSize30,paddingTop:marginTop8px}">大家助理</div>
          <div :style="{fontSize:fontSize20,paddingTop:marginTop8px}">你好</div>
        </div>
        <div style="float:right" :style="{marginTop:titlePaddingTop20}">
          <div style="color:#A8A8A8" :style="{fontSize:fontSize20,paddingTop:errFontSize14,paddingLeft:size75}">昨天</div>
          <div style="color:#A8A8A8" :style="{fontSize:fontSize20,paddingTop:errFontSize14}">有问题联系我</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { fetchList, fetchDays } from '@/api/course'
  import { parseTime } from '@/utils/date'
  import { pageSize } from '@/utils/page'

  export default {
    data () {
      return {
        allPatient: '../../../static/allPatient.png',
        addPatient: '../../../static/addPatient.png',
        income: '../../../static/income.png',
        setup: '../../../static/setup.png',
        question: '../../../static/question.png',
        buy: '../../../static/buy.png',
        doctorId: '',
        message: '../../../static/message.png',
        outpatients: '../../../static/outpatients.png',
        appreciate: '../../../static/appreciate.png',
        recommend: '../../../static/recommend.png',
        head: '../../../static/head.jpg',
        courseList: [],
        pageNum: 1,
        loading: true,
        pageSize: pageSize,
        startDateAndEndDate: '',
        month: '',
        allLoaded: false,
        listQuery: {
          empNo: '',
          startDateAndEndDate: this.startDateAndEndDate,
          month: this.month,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        demoEvents: []
      }
    },
    created () {
      this.getList()
      this.getDays()
    },
    filters: {
      formatDate (c) {
        if (c.startTime === null) {
          return '时间：--'
        }
        return '时间：' + parseTime(new Date(c.startTime), '{y}-{m}-{d} {h}:{i}') + '~' + parseTime(new Date(c.endTime), '{h}:{i}')
      },
      statusText (c) {
        if (c.status === 2) {
          return '已结束'
        } else if (c.isApplay === 1) {
          return '已报名'
        } else {
          return '去报名'
        }
      }
    },
    computed: {
      size75 () {
        return this.clientWidth * 75 / 750 + 'px'
      },
      imageDivHeight100 () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      errFontSize14 () {
        return this.clientWidth * 14 / 750 + 'px'
      },
      fontSize20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      fontSize25 () {
        return this.clientWidth * 25 / 750 + 'px'
      },
      menuLineHeight130 () {
        return this.clientWidth * 130 / 750 + 'px'
      },
      fontSize30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      titlePaddingTop30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      circleDivMarginTop20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      circleDivMarginButtom30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      circleDivHeight60 () {
        return this.clientWidth * 60 / 750 + 'px'
      },
      imageWidth50 () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      imagefontSize12 () {
        return this.clientWidth * 12 / 750 + 'px'
      },
      imageHeight50 () {
        return this.clientWidth * 50 / 750 + 'px'
      },
      headImageSize65 () {
        return this.clientWidth * 65 / 750 + 'px'
      },
      marginTop19px () {
        return this.clientWidth * 19 / 750 + 'px'
      },
      marginTop8px () {
        return this.clientWidth * 8 / 750 + 'px'
      },
      paddingLeft20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      titleFontSize24 () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      titlePaddingTop20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      circleDivPaddingLeft30 () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      size40 () {
        return this.clientWidth * 40 / 750 + 'px'
      },
      menuPaddingLeft30 () {
        return this.clientWidth * 60 / 750 + 'px'
      },
      menuHeight100 () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      menuLineHeight100 () {
        return this.clientWidth * 100 / 750 + 'px'
      },
      menuWidth150 () {
        return this.clientWidth * 170 / 750 + 'px'
      },
      size120 () {
        return this.clientWidth * 120 / 750 + 'px'
      },
      menuPaddingLeft () {
        return this.clientWidth * 30 / 750 + 'px'
      },
      circleFontSize14 () {
        return this.clientWidth * 14 / 750 + 'px'
      },
      circlePaddingTop7 () {
        return this.clientWidth * 7 / 750 + 'px'
      },
      circleWidth20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      circleHeight20 () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      circleLineHeight15 () {
        return this.clientWidth * 15 / 750 + 'px'
      },
      circlePaddingLeft30 () {
        return this.clientWidth * 30 / 750 + 'px'
      }
    },
    methods: {
      openSufferer () {
        var router = this.$router
        router.push({path: '/sufferer', query: { doctorId: 3 }})
      },
      openWorkCard () {
        var router = this.$router
        router.push({path: '/workCard'})
      },
      openSetUp () {
        var router = this.$router
        router.push({path: '/setUp'})
      },
      openInquiry () {
        var router = this.$router
        router.push({path: '/inquiry'})
      },
      openPrescribingDrugs () {
        var router = this.$router
        router.push({path: '/prescribingDrugs'})
      },
      getDays () {
        if (this.month === '') {
          this.month = parseTime(new Date(), '{y}-{m}')
        }
        this.listQuery.month = this.month
        fetchDays(this.listQuery).then(response => {
          if (response.data.msg !== undefined) {
            var error = JSON.parse(response.data.msg)
            alert(error.msg)
          } else {
            this.demoEvents = response.data
          }
        })
      },
      getList () {
        fetchList().then(response => {
          this.courseList = response.data
        })
      },
      handleDayChanged (date) {
        this.startDateAndEndDate = [new Date(date.date), new Date(date.date + ' 23:59:59')]
        this.pageNum = 1
        this.courseList = []
        this.getList()
      },
      handleMonthChanged (date) {
        this.month = date.replace('年', '-').replace('月', '')
        this.getDays()
      },
      toCourseDetail (id) {
        this.$router.push({path: '/studentCourse', query: {id: id}})
      }
    }
  }
</script>

<style lang="less" scoped>
  
  .menu{
    text-align: center;
    float: left;
  }
  .imageBackgroundColor{
    height: 100%;
    background-color: #fff;
  }
  .n-course-img-nickName {
    float: left;
  }
  .n-course-detail {
    float: left;
    color: #5b6175;
  }
  .n-course-status {
    float: right;
  }
  .n-img-nickName {
    color: #5b6175;
  }
  .n-img {
    float: left;
    border-radius: 50%;
    overflow: hidden;
  }
  .n-nickName {
    float: left;
  }
  .n-course-title {
    font-weight: bold;
  }
  .n-course-status {
    text-align: center;
  }
  .circle {
    float: left;
    text-align: center;
    color:#ffffff;
    background-color:orange;
    border-radius: 50%;      
    -moz-border-radius: 50%;     
    -webkit-border-radius: 50%;
  }
  .waiting {
    background-color: #fff;
  }
  .last-solid {
    border-bottom: solid 1px #E0E0E0;
  }
  .circleDiv {
    background:#ffe6cc;
  }
  .head-Image {
    margin:10px auto;
    border-radius:50%;
  }
</style>
